<template>
	<view class="flex flex-column">
		<view class="px-2 flex justify-between align-center" style="height: 88rpx;" :style="{ backgroundColor: bgColor }">
			<view class="text-center py-1 font font-weight-bold w-100" :class="item.isActive ? 'selected text-success' : 'unselected text-dark'" 
				v-for="(item, index) in tabs" :key="index" @click="handleActive(item, index)">{{item.label}}</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: 'tab-bar',
		props: {
			tabs: {
				type: Array,
				default: function() {
					return []
				}
			},
			bgColor: {
				type: String,
				default: ''
			}
		},
		methods: {
			handleActive(item, index) {
				this.tabs.forEach(item => {
					item.isActive = false;
				})
				item.isActive = true;
				this.$emit('click', item, index, this.tabs);
			}
		}
	}
</script>

<style scoped lang="scss">
	.selected {
		border-bottom: 5rpx solid #28a745;
	}
	
	.unselected{
		border-bottom: 5rpx solid #ffffff00;
	}
</style>